<template>
  <div
    id="app"
    v-loading="$store.state.isTableLoading.status"
    :element-loading-text="$store.state.isTableLoading.msg"
    :element-loading-background="$store.state.isTableLoading.bg"
  >
    <Header v-if="$store.state.showTopTool"></Header>
    <router-view class="CONTENT" v-if="isRouterActive"></router-view>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    Header
  },
  data() {
    return {
      isRouterActive: true
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  mounted() {
    //解决axios流程打断后用户手动切换至其他页面 加载遮罩不消失
    this.$store.commit("loading", { status: false });
  },
  methods: {
    reload() {
      this.isRouterActive = false;
      this.$nextTick(() => {
        this.isRouterActive = true;
      });
    }
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#app {
  // width: 100vw;
  width: 1200px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  .CONTENT {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
